<template>
  <view class="confirm-container">
    <view class="page-header">
      <view class="header-left" @click="goBack">
        <u-icon name="arrow-left" size="20" color="#333"></u-icon>
        <text>返回</text>
      </view>
      <view class="header-title">确认借条</view>
      <view class="header-right"></view>
    </view>
    
    <view class="confirm-content">
      <view class="loan-summary">
        <view class="summary-header">
          <text class="name">{{ borrowerName }} </text>
          <text>欠 </text>
          <text class="amount">{{ formData.amount }} </text>
          <text>元</text>
        </view>
        
        <view class="summary-details">
          <text>欠款期限为 {{ formData.startDate }} 至 {{ endDate }}，并承诺按年化利率 {{ formData.interestRate }}% 计算支付利息，于到期日偿还本息。</text>
        </view>
      </view>
      
      <view class="parties-section">
        <view class="party-item">
          <view class="party-label">债权人：{{ lenderName }}</view>
          <view class="id-number">身份证号：{{ maskIdNumber(lenderIdNumber) }}</view>
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
          </view>
        </view>
        
        <view class="party-item">
          <view class="party-label">债务人：{{ borrowerName }}</view>
          <view class="id-number">身份证号：{{ maskIdNumber(borrowerIdNumber) }}</view>
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#ccc" size="24"></u-icon>
          </view>
        </view>
      </view>
      
      <view class="agreement-section">
        <checkbox v-model="hasAgreed" color="#1989fa" />
        <text class="agreement-text">已阅读并同意 <text class="link-text">相关协议</text></text>
      </view>
      
      <view class="confirm-btn" :class="{ disabled: !hasAgreed }" @click="confirmLoan">确认欠条</view>
      
      <view class="notice">
        <u-icon name="info-circle" color="#ff9900" size="16"></u-icon>
        <text class="notice-text">递交上传平台公示</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      formData: {},
      isLender: false,
      hasAgreed: false,
      // 模拟数据
      lenderName: '钱峰',
      lenderIdNumber: '360123456789101010',
      borrowerName: '周苦龙',
      borrowerIdNumber: '511123456789393917',
      endDate: ''
    }
  },
  onLoad() {
    // 获取表单数据
    const formData = uni.getStorageSync('loanFormData');
    if (formData) {
      this.formData = formData;
      // 使用表单中的结束日期
      this.endDate = formData.endDate;
    }
    
    // 获取用户角色
    const role = uni.getStorageSync('userRole');
    this.isLender = role === 'lender';
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}/${month}/${day}`;
    },
    
    maskIdNumber(idNumber) {
      if (!idNumber || idNumber.length < 18) return idNumber;
      return idNumber.substring(0, 3) + '*'.repeat(11) + idNumber.substring(14);
    },
    
    confirmLoan() {
      if (!this.hasAgreed) {
        return uni.showToast({
          title: '请阅读并同意相关协议',
          icon: 'none'
        });
      }
      
      uni.showLoading({
        title: '处理中...'
      });
      
      // 模拟处理
      setTimeout(() => {
        uni.hideLoading();
        
        uni.showToast({
          title: '借条已创建成功',
          icon: 'success',
          duration: 2000
        });
        
        // 延迟跳转
        setTimeout(() => {
          uni.switchTab({
            url: '/pages/transaction/index'
          });
        }, 2000);
      }, 1500);
    }
  }
}
</script>

<style lang="scss">
.confirm-container {
  min-height: 100vh;
  background-color: #f5f7fa;
}

.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 90rpx;
  background-color: #fff;
  padding: 0 30rpx;
  border-bottom: 1px solid #f0f0f0;
}

.header-left {
  display: flex;
  align-items: center;
}

.header-left text {
  margin-left: 10rpx;
  font-size: 28rpx;
  color: #333;
}

.header-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}

.header-right {
  width: 60rpx;
}

.confirm-content {
  padding: 30rpx 20rpx;
}

.loan-summary {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
}

.summary-header {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.name {
  font-weight: bold;
}

.amount {
  font-weight: bold;
}

.summary-details {
  font-size: 28rpx;
  color: #333;
  line-height: 1.5;
}

.parties-section {
  background-color: #fff;
  border-radius: 12rpx;
  margin-bottom: 30rpx;
}

.party-item {
  display: flex;
  flex-direction: column;
  padding: 30rpx;
  border-bottom: 1px solid #f0f0f0;
  position: relative;
}

.party-item:last-child {
  border-bottom: none;
}

.party-label {
  font-size: 30rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 10rpx;
}

.id-number {
  font-size: 26rpx;
  color: #999;
}

.arrow-icon {
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
}

.agreement-section {
  display: flex;
  align-items: center;
  margin: 30rpx 0;
}

.agreement-text {
  font-size: 28rpx;
  color: #666;
  margin-left: 10rpx;
}

.link-text {
  color: #1989fa;
}

.confirm-btn {
  height: 90rpx;
  background-color: #1989fa;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
}

.confirm-btn.disabled {
  background-color: #cccccc;
}

.notice {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ff9900;
  font-size: 24rpx;
}

.notice-text {
  margin-left: 6rpx;
}
</style> 